<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		 .grid {
      margin: auto;
      width: 530px;
      text-align: center;
    }
    .grid table {
      border-top: 1px solid #C2D89A;
      width: 100%;
      border-collapse: collapse;
    }
    .grid th,td {
      padding: 10;
      border: 1px dashed #F3DCAB;
      height: 35px;
      line-height: 35px;
    }
    .grid th {
      background-color: #F3DCAB;
    }
    .grid .book {
      padding-bottom: 10px;
      padding-top: 5px;
      background-color: #F3DCAB;
    }
    .grid .total {
    	height: 30px;
    	line-height: 30px;
    	background-color: #F3DCAB;
    	border-top: 1px solid #C2D89A;
    }
	</style>
</head>
<body>
	<div id="app">
		<div class="grid">
			<div>
				<h1>图书管理</h1>
				<div class="book">
					<div>
						<label for="id">
							编号
						</label>
						<!-- 自定义指令的使用方式 -->
						<input type="text" id="id" v-model="id" :disabled="flag" v-focus>
						<label for="name">名称</label>
						<input type="text" id="name" v-model="name">
						<button @click="handle" :disabled="submitFlag">提交</button>
					</div>
				</div>
			</div>
			<div class="total">
				<span>图书总数：</span>
				<span>{{total}}</span>
			</div>
			<table>
				<thead>
					<!-- tr 行 表示一行有多少个 -->
					<tr>
						<th>编号</th>
						<th>编号</th>
						<th>编号</th>
						<th>编号</th>
					</tr>
				
				</thead>
				<tbody>
					<tr :key="item.id" v-for="item in books">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.date}}</td>
						<td>
							<!-- @click.prevent 禁止a标签的默认行为 -->
							<a href="" @click.prevent="toEdit(item.id)">修改</a>
							<span>|</span>
							<a href="" @click.prevent="deleteBook(item.id)">删除</a>
						</td>

					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<script src="./js/vue.js" type="text/javascript" charset="utf-8" ></script>
	<script type="text/javascript">
		/**
			Vue图书管理案例：

		*/
		  /*
      自定义指令
    */
	    Vue.directive('focus', {
	    	// 指令的业务逻辑
	    	inserted: function(el) {
	    		// el 表示指令所绑定的元素
	    		el.focus();
		    	}
		    })
				// 完整的日期格式化代码
		 // Vue.filter('format', function(value, arg) {
	  //     function dateFormat(date, format) {
	  //       if (typeof date === "string") {
	  //         var mts = date.match(/(\/Date\((\d+)\)\/)/);
	  //         if (mts && mts.length >= 3) {
	  //           date = parseInt(mts[2]);
	  //         }
	  //       }
	  //       date = new Date(date);
	  //       if (!date || date.toUTCString() == "Invalid Date") {
	  //         return "";
	  //       }
	  //       var map = {
	  //         "M": date.getMonth() + 1, //月份 
	  //         "d": date.getDate(), //日 
	  //         "h": date.getHours(), //小时 
	  //         "m": date.getMinutes(), //分 
	  //         "s": date.getSeconds(), //秒 
	  //         "q": Math.floor((date.getMonth() + 3) / 3), //季度 
	  //         "S": date.getMilliseconds() //毫秒 
	  //       };
	  //       format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
	  //         var v = map[t];
	  //         if (v !== undefined) {
	  //           if (all.length > 1) {
	  //             v = '0' + v;
	  //             v = v.substr(v.length - 2);
	  //           }
	  //           return v;
	  //         } else if (t === 'y') {
	  //           return (date.getFullYear() + '').substr(4 - all.length);
	  //         }
	  //         return all;
	  //       });
	  //       return format;
	  //     }
	  //     return dateFormat(value, arg);
	  //   })
		var vm = new Vue({
			el: "#app",
			data: {
				flag: false,
				submitFlag: false,
				id: '',
				name: '',
				books: []
				
			},
			methods: {
				handle: function() {
					if (this.flag) {
						// 编辑操作
						// 就是根据当前的ID去更新数组中对应的数据
						// some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。注意： some() 不会对空数组进行检测。
						// 注意： some() 不会改变原始数组。
						this.books.some((item) => {
							if (item.id == this.id) {
								item.name = this.name;
								// 完成更新操作之后， 需要终止循环
								return true;
							}
						});
						this.flag = false;
					}else {
						// 添加操作
						// 添加图书 {对象添加到数组里}
						// 创建一个空对象 ，保存新的数据
						var book = {};
						book.id = this.id;
						book.name = this.name;
						book.date = '';
						// push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
						this.books.push(book);
						// 清空表单
						this.id = '';
						this.name = '';
					}
					// 修改完数据后置空表单
					this.id = '';
					this.name = '';
				},
				toEdit(id) {
					// 禁止修改图书的编号（id） 
					this.flag = true;
					console.log(id)
					// 根据ID查询出要编辑的数据
					var book = this.books.filter(function(item) {
						return item.id == id;
					});
					console.log(book)
					// 接下来就是要把获取到的信息填充到表单
					this.id =  book[0].id;
					this.name =  book[0].name;

				},
				deleteBook(id) {
					// 删除图书 （根据id找到要删除的索引）然后再根据索引再去删除数组中的一个元素
					// 根据id从数组中查找元素的索引
					// var index = this.books.findIndex(function(item) { // 别忘了这个函数要传参哈！
					// 	return item.id == id;
					// });
					// 根据索引删除数组元素
					// this.books.splice(index, 1);
					// ----------------------------
					// 第二种方法： 通过filter进行删除
					this.books = this.books.filter(function(item) {
						return item.id != id;
					})
				}
			},
			computed: {
				total: function() {
					// 计算图书的总数[直接返回数组的长度！]
					return this.books.length;
				}
			},
			// 侦听器
			watch: {
				name: function(val) {
				// 验证图书的名称是否已经存在
				var flag = this.books.some(function(item) {
					return item.name = val;
				})
				if (flag) {
					// 图书名称已经存在
					this.submitFlag = true;
				} else {
					// 图书名称不存在 
					this.submitFlag = false;
				}

				}
			},
			// 生命周期（图书数据处理）
			mounted: function() {
				// 该生命周期钩子函数被触发的时候， 模板已经可以使用
				// 一般此时用于获取后台数据， 然后把数据填充到模板!
				var data = [{
					id: 1,
					name: '三国演义',
					date: '2525609975000'
				},
				{
					id: 2,
					name: '水浒传',
					date: '2525609975000'
				},
				{
					id: 3,
					name: '西游记',
					date: '2525609975000'
				},{
					id: 4,
					name: '红楼梦',
					date: '2525609975000'
				}];
				this.books = data
			}
		});
	</script>
</body>
</html>